<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <title>地图绘制</title>
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        /* 按钮容器样式 */
        #controls {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 10;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,.3);
        }
        /* 按钮样式 */
        .btn {
            padding: 8px 12px;
            margin: 0 5px;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #e6e6e6;
        }
        .btn:disabled {
            background-color: #f5f5f5;
            color: #999;
            cursor: not-allowed;
        }
    </style>
    <script src="https://webapi.amap.com/maps?v=2.0&key=365633076319ec47582865848259c200&callback=initMap"></script>
</head>
<body>
<div id="container"></div>

<!-- 1. 添加控制按钮 -->
<div id="controls">
    <button id="startBtn" class="btn">开始绘制</button>
    <button id="finishBtn" class="btn" disabled>完成绘制</button>
    <button id="clearBtn" class="btn">清除全部</button>
</div>

<script>
    var map;
    var mouseTool; // 鼠标绘制工具
    var drawnPolygon; // 存储已绘制的多边形

    function initMap() {
        map = new AMap.Map('container', {
            center: [112.857188, 25.799993],
            zoom: 8
        });

        // 加载鼠标工具插件
        map.plugin(["AMap.MouseTool"], function() {
            mouseTool = new AMap.MouseTool(map);

            // 监听绘制完成事件
            mouseTool.on('draw', function(event) {
                // event.obj 就是绘制完成的覆盖物对象
                console.log('绘制完成');

                // 停止绘制
                mouseTool.close(true); // true代表清除绘制的临时图形
                setDrawingMode(false);

                // 获取路径并创建我们自定义的多边形
                const path = event.obj.getPath();
                addCustomPolygon(path);
            });
        });

        // 绑定按钮事件
        document.getElementById('startBtn').onclick = function() {
            clearAll(); // 开始新的绘制前先清除旧的
            setDrawingMode(true);
            // 开启鼠标画多边形模式
            mouseTool.polygon({
                fillColor: '#00b0ff',
                strokeColor: '#80d8ff'
            });
        };

        document.getElementById('finishBtn').onclick = function() {
            // MouseTool 会自动在双击时完成绘制，所以这个按钮可以作为备用
            // 或者在单击完成的场景中使用
            mouseTool.close(false); // 手动完成绘制
        };

        document.getElementById('clearBtn').onclick = clearAll;
    }

    // 添加自定义样式的多边形
    function addCustomPolygon(path) {
        if (drawnPolygon) {
            map.remove(drawnPolygon);
        }
        drawnPolygon = new AMap.Polygon({
            path: path,
            fillColor: '#ccebc5',
            strokeOpacity: 1,
            fillOpacity: 0.5,
            strokeColor: '#2b8cbe',
            strokeWeight: 2,
            strokeStyle: 'dashed',
            strokeDasharray: [5, 5],
        });
        map.add(drawnPolygon);
        map.setFitView([drawnPolygon]);

        // 【关键】将数据回传给鸿蒙
        // 检查 jsProxy 对象是否存在 (由鸿蒙侧注入)
        if (window.jsProxy && window.jsProxy.onPolygonDrawn) {
            // 将路径坐标数组转换为JSON字符串并发送
            const pathArray = path.map(p => [p.lng, p.lat]);
            window.jsProxy.onPolygonDrawn(JSON.stringify(pathArray));
        }
    }

    // 清除所有覆盖物
    function clearAll() {
        if (drawnPolygon) {
            map.remove(drawnPolygon);
            drawnPolygon = null;
        }
        // 如果MouseTool还在绘制中，也清除掉
        mouseTool.close(true);
        setDrawingMode(false);
    }

    // 设置UI状态
    function setDrawingMode(isDrawing) {
        if (isDrawing) {
            document.getElementById('startBtn').disabled = true;
            document.getElementById('finishBtn').disabled = false;
        } else {
            document.getElementById('startBtn').disabled = false;
            document.getElementById('finishBtn').disabled = true;
        }
    }

</script>
</body>
</html>
